<template>
  <div class="hdgl-edit-step-4">
    <!--        进度文案-->
    <div class="ml-30">
      <div class="d-aic">
        <div
          v-for="(item, index) in awardList"
          :key="index"
          class="tab-title"
          :class="{'active':activeKey===index}"
          @click="changeRule(index)">
          {{ toChineseIndex(index)+'阶奖励文案' }}
        </div>
      </div>
      <div v-for="(award, index) in awardList" :key="index" class="d-aic">
        <div v-show="activeKey===index">
          <a-form-model :ref="'form_'+index" :model="award">
            <a-form-model-item label="成功助力消息">
              <wx-reply-editor v-model="award.helpSuccessMsg" :splitButton="splitButton"/>
            </a-form-model-item>
            <a-form-model-item label="阶段完成消息">
              <wx-reply-editor v-model="award.finishMsg" :splitButton="splitButton"/>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import WxReplyEditor from './wx-reply-editor'
  import { toChineseIndex } from '../../../../utils'

  export default {
    name: 'HdglEditStep4',
    components: { WxReplyEditor },
    props: {
      model: {
        type: Object,
        default: () => {
        }
      }
    },
    data () {
      return {
        activeKey: 0,
        toChineseIndex
      }
    },
    computed: {
      awardList () {
        return this.model.awardList
      },
      splitButton () {
        const btnList = []
        for (let i = 0; i < this.awardList.length; i++) {
          let numCn = null
          if (i + 1 === 1) {
            numCn = '一'
          }
          if (i + 1 === 2) {
            numCn = '二'
          }
          if (i + 1 === 3) {
            numCn = '三'
          }
          btnList.push({ name: numCn + '阶任务目标人数', value: this.awardList[i].target })
        }
        return { name: 'taskTargetNum', btnList: btnList }
      }
    },
    methods: {
      check () {

      },
      changeRule (index) {
        this.activeKey = index
      }
    }
  }
</script>

<style lang="less">
  .hdgl-edit-step-4 {
    .tab-title {
      margin-right: 15px;
      color: #595959;
      font-size: 14px;
      cursor: pointer;

      &.active {
        color: #2493FC;
      }
    }
  }
</style>
